<template>
	<n-popover
		ref="popoverRef"
		trigger="click"
		placement="bottom"
		:show="show"
		:show-arrow="false"
		@update:show="handleUpdateShow">
		<template #trigger>
			<div class="h-9 rounded-lg flex overflow-hidden text-white">
				<div
					class="h-full px-4 bg-[rgba(0,0,0,0.5)] flex items-center gap-1 cursor-pointer app-bg-react">
					<!-- base-amount包括了钱和图标 -->
					<span v-if="currencyStore.loading.exchangeRate || walletStore.loading.balanceList">
						{{ $t('tip.loading') }}
					</span>
					<span v-if="appStore.gaming">{{ $t('slotsDetail.isPlaying') }}</span>
					<base-amount
						:hideCurrencyAmount="
							currencyStore.loading.exchangeRate ||
							walletStore.loading.balanceList ||
							appStore.gaming
						"
						:value="walletStore.balanceCur?.freeAmount"
						:currency="walletStore.balanceCur?.currency"
						:class="{ 'app-scale': show }"
						:amount-class="{ 'max-w-24': !isPC() }" />
					<!-- base-icon 是下拉图标 -->
					<base-icon
						name="down"
						size="16"
						color="var(--color-text-3)"
						class="duration-300"
						:class="{ 'rotate-180': show }" />
				</div>
				<!-- 钱包图标和文字内容 -->
				<div
					class="px-[6px] bg-primary flex items-center gap-1 app-bg-react"
					@click.stop="walletStore.setWalletDepositShow(true)">
					<base-icon name="wallet1" size="24" />
					<base-text textT="wallet.deposit" v-if="isPC()"></base-text>
				</div>
			</div>
		</template>
		<div class="w-[281px] h-max-[473px] rounded-lg overflow-hidden flex flex-col">
			<app-wallet-search v-model="searchKey" />
			<div class="mb-[6px] px-4 text-center">
				<div class="text-sm text-t-3">{{ $t('wallet.estimatedBalance') }}</div>
				<div class="text-lg">
					<base-amount
						:value="walletStore.totalBalance"
						:currency="walletStore.walletConfig.selectedFiatCurrency"
						:currency-to="walletStore.walletConfig.selectedFiatCurrency"
						hide-currency
						showSymbol />
				</div>
			</div>
			<app-wallet-balance @update:show="handleUpdateShow" :searchKey="searchKey" />
			<app-wallet-setting v-model:show="show" />
		</div>
	</n-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { NPopover } from 'naive-ui'
import { useAppStore, useCurrencyStore, useWalletStore } from '@/store'
import { isPC } from '@/utils'
import { BaseAmount, BaseIcon, BaseText } from '@/components/base'
import AppWalletSearch from './app-wallet-search.vue'
import AppWalletBalance from './app-wallet-balance.vue'
import AppWalletSetting from './app-wallet-setting.vue'

defineOptions({ name: 'AppWallet' })

const currencyStore = useCurrencyStore()
const walletStore = useWalletStore()
const appStore = useAppStore()

const searchKey = ref('')
const show = ref(false)
const handleUpdateShow = (val: boolean) => {
	show.value = val
}
</script>

<style lang="scss" scoped>
.app-scale {
	animation: auto-scale 0.15s;
}

@keyframes auto-scale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1);
	}
}
</style>
